.header-wrapper{
	border-bottom: 1px solid #ddd;
	position: fixed;
	width: 100%;
	z-index: 1000;

	div.header {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		height: 65px;

		@media(max-width: 600px) {

			justify-content: center;
		}

		div.logo {
			flex: 1;

			a {
				display: block;
				height: 50px;
				font-family: "Courier New";
				padding:24px 24px;
				font-size:2.5rem;
				color: #e91e63;
				line-height: 20px;
				width: 230px;

				@media(max-width: 600px) {
					font-size: 34px;
				}
			}

			a:hover {
				text-decoration: none;
			}
		}


		div.title {
			font-family: 'Montserrat', sans-serif !important;
			font-weight: 600;
			font-size: 2rem;
			margin-right:24px;


			@media(max-width: 600px) {
				position: absolute;
				top: 65px;
				font-size: 23px;
			}
		}

		label.menu-toggle {
			display: none;
		}

		div.menu {
			opacity: 0;
			flex: 1;
			display: flex;
			justify-content: flex-end;
			transition: opacity .25s ease-in-out;

			div.option {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-right: 5px;

				button.btn {
					background-color: inherit;
					border: none;
					color: #7f7f7f;
					cursor: pointer;
					font-size: 0.6rem;

					i.md-12 {
						position: relative;
						left:40px;
						bottom: 8px;

						@media (max-width: 423px) {
							left: 0px;
							bottom: 0px;
						}
					}

					span.info {
						position: relative;
						top: 3px;
						white-space: nowrap;
					}
				}
			}

			@media(max-width: 900px) {
				opacity: 1;
			}
		}

		div.mouse-moving {
			opacity: 1;
			pointer-events: auto;
		}
	}

	@media(max-width: 600px) {
			min-height: 110px;

	}
}

div.header-wrapper:hover div.header div.menu {
		opacity:1;
		pointer-events: auto;
}

@media (max-width: 350px) {
	div.header-wrapper div.header div.logo {
		flex: none;
		width: 46%;

		a {
			font-size: 30px;
		}
	}
	div.header-wrapper div.header div.menu {
		flex: none;
		width: 54%;
	}
}
